<template>
  <div class="dashboard">

    <div class="TeacherContent">
      <div class="intro-banner">
        <div class="banner-content">
          <img src="@/assets/svg/classroom/title.svg">
          <h1 style="color: #077ef7">智慧课堂</h1>
        </div>
        <el-divider style="margin: 0; width: 100%"></el-divider>
      </div>

      <div class="video-monitor">
        <img src="@/assets/img/img.png" style="width: 100%"/>
        <div
          class="prism-big-play-btn"
        >
        </div>
      </div>

      <div class="charts">
        <div class="attendance">
          <el-card title="课堂出勤情况" class="chart-card">
            <div>课堂出勤率</div>
            <ClassAttendance />
          </el-card>
        </div>
        <div style="width: 100%; height: 10%">
          <el-card title="课堂参与度变化曲线" class="chart-card1">
            <!-- 在这里插入图表 -->
            <AttentionAnalysis />
          </el-card>
        </div>
      </div>



    </div>
  </div>
  <div style="display: flex; justify-content: center;">
    <Sidebar />
  </div>
</template>

<script setup>
import AttentionAnalysis from '@/views/Teacher/components/AttentionAnalysis.vue'
import ClassAttendance from '@/views/Teacher/components/ClassAttendance.vue'
import Sidebar from '@/components/Sidebar.vue'
</script>

<style scoped>
.dashboard {
  background-color: #ffffff;
}

.TeacherContent {
  display: flex;
  flex-direction: column;
}

.intro-banner {
  position: relative;
  border-radius: 8px;
  width: 100%;
  height: 100%;
}

.banner-content {
  position: relative;
  display: flex;
  padding-left: 4%;
  gap: 3%;
  align-items: center;
}

.banner-content div {
  max-width: 70%;
  margin-right: 100px;
  flex: 1;
}

.banner-content h2 {
  font-size: 18px;
  color: white;
  text-align: left;
  margin: 0;
}

.banner-content p {
  margin: 0;
  color: rgb(10, 10, 10);
  font-size: 13px;
  text-align: left;
  margin-top: 10px;
}

.charts {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2%;
}

.chart-card1 {
  width: 100%;
}

.attendance {
  width: 100%;
  height: 100%;
  margin: 0;
}

.video-monitor {
  margin-top: 5%;
  width: 100%;
  display: flex;
  justify-content: center;

  .prism-big-play-btn {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 25%;
    width: 64px;
    height: 64px;
    background-size: contain;
    background-image: url("@/assets/img/img_1.png");
    cursor: pointer;
  }
}

</style>
